import React, { useState, useEffect } from 'react'
import HeaderNav from "@/components/header-nav"
import { DownOutline } from 'antd-mobile-icons'
import styles from "./index.module.less"
import { getPlayGuide } from '@/service/setting'

const Help = () => {
    const [expandedSections, setExpandedSections] = useState({})
    
    // 添加状态来存储动态数据
    const [playGuideData, setPlayGuideData] = useState(null)
    const [loading, setLoading] = useState(true)

    const toggleSection = (section) => {
        setExpandedSections(prev => ({
            ...prev,
            [section]: !prev[section]
        }))
    }

    // 在组件挂载时获取动态数据
    useEffect(() => {
        const fetchPlayGuideData = async () => {
            try {
                setLoading(true)
                const response = await getPlayGuide()
                
                // 处理API返回的数据
                let processedData = response
                
                // 如果response有value字段
                if (response && response.value) {
                    // 如果value是字符串，尝试解析
                    if (typeof response.value === 'string') {
                        // 先清理可能的多余字符和HTML标签
                        let cleanedValue = response.value.trim()
                        
                        // 尝试找到第一个 { 和最后一个 } 来提取纯 JSON
                        const firstBrace = cleanedValue.indexOf('{')
                        const lastBrace = cleanedValue.lastIndexOf('}')
                        
                        if (firstBrace !== -1 && lastBrace !== -1 && lastBrace > firstBrace) {
                            cleanedValue = cleanedValue.substring(firstBrace, lastBrace + 1)
                        }
                        
                        processedData = JSON.parse(cleanedValue)
                    } else {
                        processedData = response.value
                    }
                }
                
                setPlayGuideData(processedData)
                
                // 初始化展开状态，默认全部展开
                if (processedData && processedData.sections) {
                    const initialExpanded = {}
                    processedData.sections.forEach((section, index) => {
                        const sectionKey = `section_${index}` // 使用索引确保唯一性
                        initialExpanded[sectionKey] = true // 默认全部展开
                    })
                    setExpandedSections(initialExpanded)
                }
            } catch (error) {
                console.error('获取畅玩指南数据失败:', error)
                // 如果API调用失败，使用默认的静态数据
                const fallbackData = {
                    sections: [
                        {
                            title: "账户与安全",
                            items: [
                                {
                                    question: "如何修改密码？",
                                    answer: "您可以在\"我的\"→\"设置\"→\"账户与安全\"中找到修改密码的选项。输入您的旧密码和新密码即可完成修改。"
                                },
                                {
                                    question: "如何找回账号？",
                                    answer: "如果您忘记了密码，可以在登录页面点击\"忘记密码\"，通过您注册时使用的手机号或邮箱来找回账号。"
                                }
                            ]
                        },
                        {
                            title: "积分与等级",
                            items: [
                                {
                                    question: "如何提升积分？",
                                    answer: "您可以通过以下方式提升积分：",
                                    list: ["参与活动", "邀请好友"]
                                },
                                {
                                    question: "如何查看积分明细？",
                                    answer: "在\"个人中心\"→\"积分详情\"页面，您可以查看到详细的积分获取和消费记录。"
                                }
                            ]
                        },
                        {
                            title: "联系我们",
                            items: [
                                {
                                    answer: "如果以上内容没有解决您的问题，您可以直接联系我们的管理员。",
                                    contact: {
                                        email: "admin@example.com",
                                        text: "联系管理员"
                                    }
                                }
                            ]
                        }
                    ]
                }
                setPlayGuideData(fallbackData)
                
                // 初始化展开状态，默认全部展开
                const initialExpanded = {}
                fallbackData.sections.forEach((section, index) => {
                    const sectionKey = `section_${index}` // 使用索引确保唯一性
                    initialExpanded[sectionKey] = true // 默认全部展开
                })
                setExpandedSections(initialExpanded)
            } finally {
                setLoading(false)
            }
        }

        fetchPlayGuideData()
    }, [])

    // 如果正在加载，显示加载状态
    if (loading) {
        return (
            <div className={styles.helpPage}>
                <div className="header">
                    <HeaderNav title="帮助与支持" backArrow={true}></HeaderNav>
                </div>
                <div className={styles.helpPageWrapper}>
                    <div className={styles.pageSubtitle}>常见问题解答与帮助中心</div>
                    <div style={{ textAlign: 'center', padding: '50px 0' }}>加载中...</div>
                </div>
            </div>
        )
    }

    return (
        <div className={styles.helpPage}>
            <div className="header">
                <HeaderNav title="帮助与支持" backArrow={true}></HeaderNav>
            </div>
            <div className={styles.helpPageWrapper}>
                <div className={styles.pageSubtitle}>常见问题解答与帮助中心</div>

                <div className={styles.faqContainer}>
                    {playGuideData && playGuideData.sections && playGuideData.sections.map((section, sectionIndex) => {
                        const sectionKey = `section_${sectionIndex}` // 使用索引确保唯一性
                        const isExpanded = expandedSections[sectionKey] !== undefined ? expandedSections[sectionKey] : true
                        
                        return (
                            <div key={sectionIndex} className={styles.faqSection}>
                                <div
                                    className={styles.faqHeader}
                                    onClick={() => toggleSection(sectionKey)}
                                >
                                    <h2 className={styles.faqTitle}>{section.title}</h2>
                                    <DownOutline
                                        className={`${styles.chevronIcon} ${isExpanded ? styles.expanded : ''}`}
                                    />
                                </div>
                                {isExpanded && (
                                    <div className={styles.faqContent}>
                                        {section.items && section.items.map((item, itemIndex) => (
                                            <div key={itemIndex}>
                                                {item.question && (
                                                    <div className={styles.faqItem}>
                                                        <h3 className={styles.questionTitle}>{item.question}</h3>
                                                        <p className={styles.answerText}>{item.answer}</p>
                                                        {item.list && (
                                                            <ul className={styles.answerList}>
                                                                {item.list.map((listItem, listIndex) => (
                                                                    <li key={listIndex}>{listItem}</li>
                                                                ))}
                                                            </ul>
                                                        )}
                                                    </div>
                                                )}
                                                {!item.question && item.answer && (
                                                    <div className={styles.faqItem}>
                                                        <p className={styles.answerText}>{item.answer}</p>
                                                        {item.contact && (
                                                            <a
                                                                href={`mailto:${item.contact.email}`}
                                                                className={styles.contactItem}
                                                            >
                                                                <span className={styles.contactIcon}>email</span>
                                                                <span className={styles.contactText}>{item.contact.text}</span>
                                                            </a>
                                                        )}
                                                    </div>
                                                )}
                                                {itemIndex < section.items.length - 1 && <div className={styles.divider}></div>}
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    );
};

export default Help;
